<template>
  <teleport to="body">
    <div class="nbox" v-if="!infos.email">
      <van-empty
      class="kongkong"
        description="当前为游客"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
      >
        <van-button round type="danger" class="bottom-button" @click="toReg">前去登录</van-button>
      </van-empty>
    </div>
  </teleport>
</template>
      
<script setup lang='ts'>
import {computed} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from '@/store'
const store = useStore()
const router = useRouter()
const infos = computed(()=>store.state.users.infos)
const toReg = ()=>{
    router.push('/login')
}
</script>
      
  <style lang="scss" scoped>
  .nbox{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:1000;
    background-color: rgba($color: #000000, $alpha: .92);
    .kongkong{
        width:100%;
        position: absolute;
        top:20vh;
        left:50%;
        transform: translateX(-50%);
    }
  }
</style>